<script setup>
import {
  PlusSquareOutlined,
  DeploymentUnitOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { ref } from "vue";

const Router = useRouter();
const Active = ref({});
const list = ref([
  { id: "AAA1", name: "AAA" },
  { id: "AAA2", name: "AAA" },
  { id: "AAA3", name: "AAA" },
  { id: "AAA4", name: "AAA" },
  { id: "AAA5", name: "AAA" },
  { id: "AAA6", name: "AAA" },
]);

const SelectForm = function (Item) {
  Active.value = Item;
};
const Edit = function () {
  Router.push("/Edit/" + Active.value.id);
};
</script>
<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <DeploymentUnitOutlined class="Icon" />
      <span>表单编辑器</span>
    </a-layout-header>
    <a-layout>
      <a-layout-sider class="sider" width="300">
        <div class="Add" title="新建">
          <PlusSquareOutlined class="Icon" />
          <span>创建</span>
        </div>
        <div
          class="Item"
          v-for="item in list"
          :class="{ Active: Active.id == item.id }"
          @click="SelectForm(item)"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </a-layout-sider>
      <a-layout-content>
        <template v-if="Active.id">
          <div class="Title">
            {{ Active.name }}
            <a-button type="primary" @click="Edit">编辑</a-button>
          </div>
        </template>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<style lang="less" scoped>
.layout {
  height: 100%;
}
.header {
  color: #fff;
  font-size: 20px;
}
.Icon {
  margin-right: 8px;
}
.Title {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #ccc;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sider {
  color: #fff;
  .Item {
    padding: 4px 8px;
    opacity: 0.7;
    cursor: pointer;
    font-size: 16px;
    &.Active {
      color: #f60;
    }
    &:hover {
      opacity: 1;
    }
  }
  .Add {
    cursor: pointer;
    padding: 8px;
    font-size: 20px;
    opacity: 0.6;
    transition: all 0.3s;
    &:hover {
      opacity: 1;
    }
  }
}
</style>